<template>
  <div class="header-container">
    <div class="logo">
      <el-icon :size="30" @click="$emit('toggle-collapse')">
        <Fold v-if="!isCollapse" />
        <Expand v-else />
      </el-icon>
    </div>
    <div class="title">宿舍管理系统</div>
  </div>
</template>

<script>
import { Fold, Expand } from '@element-plus/icons-vue'

export default {
  components: { Fold, Expand },
  props: {
    isCollapse: Boolean
  }
}
</script>

<style scoped>
.header-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100%;
  padding: 0 20px;
  position: relative; /* 用于定位折叠图标 */
}

.logo {
  position: absolute; /* 固定折叠图标在左侧 */
  left: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  flex: 1; /* 占据剩余空间，确保居中 */
}
</style>